<template>
  <div class="container">
    <el-dialog title="查看详情" :visible.sync="seeModalShow" width="650px" :before-close="cancelBtn">
      <div class="container_examine">
        <p>预约信息</p>
        <div class="examine">
          <base-info-form :base-list="examineList" />
        </div>
      </div>
      <div v-if="distribution" class="container_examine">
        <p>派发人员信息</p>
        <div class="examine">
          <el-row>
            <el-col :span="24">
              <span>机构部门：</span>
              <span>{{ distribution.department }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="container_examine" v-show="auditInfo.result">
        <p>审核结果</p>
        <div class="examine">
          <el-row>
            <el-col :span="24">
              <span>审核结果：</span>
              <span>{{ auditInfo.result }}</span>
            </el-col>
          </el-row>
          <!--          <el-row>-->
          <!--            <el-col :span="24">-->
          <!--              <span>审核意见：</span>-->
          <!--              <span>{{ auditInfo.opinion }}</span>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <el-row>
            <el-col :span="24">
              <span>审核人员：</span>
              <span>{{ auditInfo.reviewer }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelBtn">取消</el-button>
        <!--<el-button size="small"  type="primary" @click="$store.commit('setSeeModalShow', false)">确认</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import BaseInfoForm from './BaseInfoForm'
  import { getbaseInfoList } from '../api'

  export default {
    components: {
      BaseInfoForm
    },
    props: ['applyId','seeModalShow'],
    data() {
      return {
        examineList: {},
        auditInfo: {},
        distribution: ''
      }
    },
    watch: {
      applyId(newVal) {
        this.getInfoList(newVal)
      }
    },
    methods: {
      getInfoList(applyId) {
        getbaseInfoList(applyId).then(res => {
          console.log(res)
          this.examineList = res.data.data.info_datails
          this.auditInfo = res.data.data.audit
          this.distribution = res.data.data.distribution
        })
      },
      cancelBtn() {
        this.$emit('seeFun', false)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 80vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
    }
    ::v-deep .el-dialog__header {
      /*background: #3489ff;*/
      position: fixed;
      width: 650px;
      z-index: 99;
      /*.el-dialog__title {*/
      /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
        /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 20px;
      p{
        font-size: 15px;
        color: #3D4D60;
        font-weight: bold;
      }
      .examine{
        padding: 10px;
        background:#f5f5f5;
        ::v-deep .el-textarea__inner{
          border: none;
          background: #F5F5F5;
        }
        ::v-deep .el-form-item__label{
          font-weight: normal;
        }
        .el-row{
          padding: 6px 0;
          span:nth-child(2){
            color: #000;
          }
        }
        .el-select{
          width: 50%;
        }
        ::v-deep .el-textarea__inner,
        ::v-deep .el-input__inner{
          border: none;
          background: #F5F5F5;
        }
      }
    }
  }

</style>
